<template>
	<view class="container">
		<c-navBar title="登录" isBack isPerch></c-navBar>
		<view class="content">
			<view class="logo">
				<image class="img" src="/static/login/logo.jpg" mode="scaleToFill" />
			</view>
			
			<view class="title">
				隆恩建工点工台班宝
			</view>

			<view class="form">
				<u-input :customStyle="customStyle" placeholderClass="placeholder" v-model="form.account" type="text"
					placeholder="请输入账号">
					<!-- <template slot="prefix">
            <image class="img" src="/static/tabbar/login/admin.png" mode="scaleToFill" />
          </template> -->
				</u-input>
				<u-input :customStyle="customStyle" type="password" placeholderClass="placeholder"
					v-model="form.password" placeholder="请输入密码">
					<!-- <template slot="prefix">
            <image class="img" src="/static/tabbar/login/password.png" mode="scaleToFill" />
          </template> -->
				</u-input>
				<view class="bottom">
					<u-checkbox-group v-model="form.checkboxValue1" placement="column" @change="checkboxChange">
						<u-checkbox activeColor="#00693A" :customStyle="{ marginBottom: '8px' }" label="记住密码"
							name="记住密码">
						</u-checkbox>
					</u-checkbox-group>
					<!-- <text class="tip">忘记密码请联系管理员</text> -->
				</view>

				<button class="btn" @click="login"><text class="btn-text">登录</text></button>
			</view>

			<text class="tip">忘记密码请联系管理员</text>

			<view class="agreement-box">
				<view class="ag-box" @click="isAgree = !isAgree">
					<image v-if="isAgree" src="/static/login/select.png" mode=""></image>
					<image v-else src="/static/login/noselect.png" mode=""></image>
				</view>
				<view class="agreement">
					<text>我已阅读并同意</text>
					<text class="primary-color" @click.stop="jumpPage(1)">《用户协议》</text>
					<text class="primary-color" @click.stop="jumpPage(2)">《隐私协议》</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					account: '',
					password: '',
					checkboxValue1: [],
					checkboxValue: false,
				},
				isAgree: false

			}
		},
		computed: {
			customStyle() {
				return {
					width: '590rpx',
					height: '96rpx',
					background: '#F7F7F7',
					borderRadius: '12rpx 12rpx 12rpx 12rpx',
					marginBottom: '45rpx',
				}
			},
		},
		methods: {
			/** 复选框勾选 */
			checkboxChange(value) {
				if (value[0] == '记住密码') {
					this.form.checkboxValue = true
				} else {
					this.form.checkboxValue = false
				}
			},
			/** 登录 */
			login() {
				this.checkboxChange(this.form.checkboxValue1)

				if (!this.isAgree) {
					return uni.showToast({
						title: '请先查看并同意协议',
						icon: 'none',
						duration: 2000,
					})
				}

				if (!this.form.account) {
					return uni.showToast({
						title: '请输入账号',
						icon: 'none',
					})
				}
				if (!this.form.password) {
					return uni.showToast({
						title: '请输入密码',
						icon: 'none',
					})
				}


				uni.showLoading({
					title: '登录中...',
				})
				this.$api.account(this.form).then((res) => {
					console.log("res", res);
					if (res.code == 200) {
						if (res.data.detail.loginVoStatus) {
							if (this.form.checkboxValue) {
								uni.setStorageSync('user', this.form)
							}
							uni.showToast({
								icon: 'none',
								title: '登录成功',
							})
							uni.setStorageSync('token', res.data)
							this.$u.vuex('vuex_token', res.data.accessToken)


							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/tabbar/home',
								})
							}, 500)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.detail.message,
							})
						}

					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
						})
					}
				})
			},
			// 跳转到协议
			jumpPage(type) {
				// this.isAgree = true
				uni.navigateTo({
					url: `/pages/login/agreement?type=${type}`,
				})
			},
		},
		mounted() {},
		onShow() {
			const user = uni.getStorageSync('user')
			if (user.checkboxValue) {
				this.form = user
			}
		},
	}
</script>

<style scoped lang="scss">
	.tip {
		margin-top: 40rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}
	
	.container {
		background: #fff;

		.content {
			// margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 138rpx;

			.logo {
				display: flex;
				justify-content: center;

				.img {
					width: 320rpx;
					height: 320rpx;
				}
			}

			.title {
				margin-top: 41rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 38rpx;
				color: #000000;
			}

			.form {
				margin-top: 40rpx;

				.img {
					width: 23rpx;
					height: 23rpx;
				}

				::v-deep .placeholder {
					font-weight: 400;
					font-size: 25rpx;
					color: #8c9299;
					line-height: 29rpx;
				}

				.bottom {
					display: flex;
					justify-content: space-between;

					
				}

				.btn {
					margin-top: 60rpx;
					width: 590rpx;
					height: 96rpx;
					background: linear-gradient(90deg, #208A5B 0%, #00693A 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					text-align: center;

					.btn-text {
						font-weight: bold;
						font-size: 36rpx;
						color: #ffffff;
						line-height: 96rpx;
					}
				}
			}



			.agreement-box {
				position: fixed;
				bottom: 5%;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				margin-top: 130rpx;

				.ag-box {
					width: 50rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}

				.agreement {
					font-size: 28rpx;
					font-weight: 500;
					color: #666666;

					.primary-color {
						color: #00693A;
					}
				}
			}

		}
	}
</style>